<?php  
	include_once("authenticate.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CP2010 MySql Exercise</title>
<link rel="stylesheet" type="text/css" href="style.css"/>

<script type="text/javascript">
function validateUserInput() {
	//check name fields' length
	if ( document.getElementById('firstName').value.length == 0 ) {
		document.getElementById('errorFirstName').innerHTML = "First name can't be empty";
		return false;
	}
	
	if ( document.getElementById('lastName').value.length == 0 ) {
		document.getElementById('errorLastName').innerHTML = "Last name can't be empty";
		return false;
	}	
	
	// check email address format
	var reg = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;	
	if ( document.getElementById('email').value.length == 0 || !document.getElementById('email').value.match(reg) ) {
		document.getElementById('errorEmailAddress').innerHTML = "Please input a valid email address";
		return false;
	}
		
}
</script>

<?php 
	// upon user click submit button
	if ( isset($_REQUEST['Submit']) ) 
	{
		$myDB = new db();
		
		// check whether user exits already
		$validUser = $myDB->validateUser($_REQUEST['email']);
		
		if ( !$validUser ) {
			// construct a insert query
			$insert_query = "INSERT INTO colleague (firstname, lastname, telephone, email) VALUES ('" . $_REQUEST['firstName'] ."','" . $_REQUEST['lastName'] ."','" . $_REQUEST['telephone']  ."','" . $_REQUEST['email'] ."')";
			// echo $insert_query;
		
			$result = $myDB->sendSQLStatement($insert_query);	

			// check result
			if ($result == TRUE)
				echo "<p>New record is added to database.</p>";
			else 
				echo "<p style='color:red'>Fail to add new record  to database.</p>";
		}
		else {
			echo "<p style='color:red'>" . $_REQUEST['email'] ." is already registered.</p>";			
		}
	}
?>
</head>

<body class="twoColElsLtHdr">

<div id="container">
  <div id="header">
  	<table width="100%" border="0px">
    <tr><td rowspan="2"><h1>Address Book</h1></td>
    <td style="color:#039; font-weight: bold; text-align:right;"><?php	echo 'User: ' . $_SESSION['userEmail']?></td></tr>
    <tr><td style="color:#039; font-weight: bold; text-align:right;"><a href="signBook.php">Open Sign Book</a></td><tr>
    </table>
  <!-- end #header --></div>
  <div id="sidebar1">
    <h3><a href="index.php">Home</a></h3>
    <h3><a href="deleteAddress.php">Delete</a></h3>
    <h3><a href="modifyAddress.php">Modify</a></h3>
  <!-- end #sidebar1 --></div>
  <div id="mainContent">
    <!-- upon the page launch, display a form to take user input-->
    <h2> Add a new contact</h2>
    <!--  call javascript function to validate user input before submit it back to server.
    	  thevalidation function returns TRUE or FALSE. 
          If the function returns FALSE the submit will be cancelled. 	-->    
	<form action="addAddress.php" method="get"  onsubmit="return validateUserInput()">
	  <table width="700px" border="0">
	    <tr >
	      <td width="130px" >First Name</td>
	      <td width="200px"><input type="text" name="firstName" id="firstName" /></td>
	      <td width="10px" >*</td>
	      <th width="360px" ><label class="errorMessage " id="errorFirstName"></label></th>
        </tr>
	    <tr>
	      <td>Last Name</td>
	      <td><input type="text" name="lastName" id="lastName" /></td>
	      <td >*</td>          
	      <th ><label id="errorLastName" class="errorMessage " ></label></th>
        </tr>
	    <tr>
	      <td>Telephone</td>
	      <td><input type="text" name="telephone"/></td>
          <td width="10"></td>
        </tr>
	    <tr>
	      <td>Email Address</td>
	      <td><input type="text" name="email" id="email"  /></td>
	      <td>*</td>          
	      <th ><label id="errorEmailAddress" class="errorMessage " ></label></th>
        </tr>
	    <tr >
	      <td></td>
	      <td align="center"><input type="submit" name="Submit" value=" Add " />
	        &nbsp;&nbsp;
	        <input type="reset" name="Reset" value="Reset" /></td>
        </tr>
      </table>
      <br />
	</form>
	<!-- end #mainContent --></div>
	<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
   <div id="footer">
    <p>CP2010 MySql Exercise</p>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>